<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js传参修改信息</title>
    <style>
        td{
            width: 300px;
            height: 30px;
            border-bottom:1px solid aquamarine ;
            text-indent: 30px;
        }
        table tr:nth-of-type(1){
            background: green;
            color: #fff;
        }
        table{
            border-top:2px solid #333 ;
        }
        td img{
            width: 30px;
            height: 28px;
        }
        tr td:nth-of-type(2){
          text-align: left;
        }
        td input{
            display: none;
        }
        td button{
            display: none;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oTable=document.getElementById("tab");
            var oTr=oTable.getElementsByTagName("tr");
            for(var i=1;i<oTr.length;i++){
                show(oTr[i]);
            }
            function show(tr){
                var oImg=tr.getElementsByTagName("img")[0];
                var oInput=tr.getElementsByTagName("input")[0];
                var oBtn=tr.getElementsByTagName("button");
                var oTd=  tr.getElementsByTagName("td")[0];
                var oSpan=oTd.getElementsByTagName("span")[0];
                oImg.onclick=function(){
                    oInput.style.display='inline-block';
                    oBtn[0].style.display='inline-block';
                    oBtn[1].style.display='inline-block';
                }
                oBtn[0].onclick=function(){
                    if(""!=oInput.value){
                        oSpan.innerHTML=oInput.value;
                        oInput.value="";
                    }
                }
                oBtn[1].onclick=function(){
                    oInput.value="";
                    oInput.style.display='none';
                    oBtn[0].style.display='none';
                    oBtn[1].style.display='none';
                }
            }
        }
    </script>
</head>
<body>
<table  cellspacing="0" cellpadding="0" id="tab">
    <tr>
        <td colspan="2">分类名称</td>
    </tr>
    <tr>
        <td ><span>妙味课堂</span><img src="img/333.png"></td>
        <td ><input type="text" ><button>确定</button><button>取消</button></td>
    </tr>
    <tr>
        <td ><span>妙味课堂</span><img src="img/333.png"></td>
        <td ><input type="text" ><button>确定</button><button>取消</button></td>
    </tr>
</table>


</body>
</html>